var path = require('path')

//配置html-webpack-plugin插件
const HtmlPlugin = require('html-webpack-plugin')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const htmlPlugin = new HtmlPlugin({
  template: './src/index.html',
  filename: './index.html'//复制一个到根目录中，因为默认打开的就是index.html
})


module.exports = {
    //devtool source map开发模式调试时
    // devtool:'eval-source-map',
    //实际发布的时候设置为这个，或者直接关闭source map 
    devtool: 'nosources-source-map',
    //代表webpack运行模式，可选值development和production（压缩）
    mode: 'development',
    entry: path.join(__dirname, './src/index.js'),
    output: {
    path: path.join(__dirname, './dist'),
    filename: 'js/bundle.js'
    },
    plugins: [htmlPlugin, new CleanWebpackPlugin()],
    //配置自动打开浏览器
    devServer: {
        open: true,
        port:8080
      },
    //css-loader
    module: {
        rules: [
          {test: /\.css$/, use: ['style-loader', 'css-loader']},
          //less-loader
          {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
          //url路径相关
          {test: /\.jpg|png|jpeg|gif$/, use: 'url-loader?limit=5000&outputPath=images'},
          //babel-loader
          {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
        ]
    },
    //配置@路径
    resolve: {
        alias: {
          '@': path.join(__dirname, './src/')
        }
      }
  }